<template>
  <q-page class="q-pa-md">
    <div style="position: relative; user-select:none;" v-loading="loading">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; ">
        <el-icon style="cursor: pointer;" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="创建图像分类项目" />
      </q-breadcrumbs>
      <div class="row">
        <div class="col " style="padding-righ:20px;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            style="border-bottom: 1px dashed #ccc;margin-bottom: 20px;position: relative;">
            <el-menu-item index="1">全部</el-menu-item>
            <el-menu-item index="2">有标注信息(10)</el-menu-item>
            <el-menu-item index="3">无标注信息(30)</el-menu-item>
            <transition name="el-fade-in-linear">
              <el-button v-if="checkAll" type="primary" size="small"
                style="margin-bottom: 10px;position: absolute;right: 10px;bottom: 0;" plain>开始训练</el-button>
            </transition>
          </el-menu>
          <div class="row">
            <div class="col"></div>
            <div class="col " style="text-align: right; height: 30xp;line-height: 30px;">
              <div style="margin-top: -10px;position: relative;display: flex; justify-content: flex-end;">
                <Transition name="el-fade-in-linear">
                  <div class="textColor" v-if="checkAll">已选中{{checkedCities.length}}个信息</div>
                </Transition>
                <div>
                  <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
                    style="margin: 0 20px;height: 28px;">全选本页</el-checkbox>
                </div>
                <div class="textColor tagsInitial">
                  <el-icon style="vertical-align: middle;margin-top: -3px;">
                    <Delete />
                  </el-icon>
                  删除
                </div>
              </div>

            </div>
          </div>
          <div class="dataBox" v-if="chooseNumber == '1'">
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, index) in dataList.results" :key="index" style="margin-bottom: 20px;">
                <el-card shadow="never" style="position: relative;">
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"
                    style="margin: 0 20px;position: absolute;top: 0;right: 0;">
                    <el-checkbox :label="item.id" :value="item.id" size="large" @click="showCheck" />
                  </el-checkbox-group>
                  <el-image :src="item.url" fit />
                  <div style="width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{
                    item.file_upload_id }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div v-if="chooseNumber == '2'">
            有标注信息
          </div>
          <div v-if="chooseNumber == '3'">
            无标注信息
          </div>
        </div>
        <div class="col col-3" style="padding-left:20px;">
          <q-breadcrumbs class="q-mb-md" style="height:48px;line-height: 35px; border-bottom: 1px dashed #ccc;">
            <q-breadcrumbs-el label="标签栏" class="textColor" />
          </q-breadcrumbs>
          <div>
            <el-button type="primary" plain size="small" style="margin-bottom: 10px;">添加标签</el-button>
          </div>
          <el-input v-model="searchName" placeholder="搜索数据集名称" :suffix-icon="Search" style="width: 250px;" />
          <div class="tagsBox">
            <div class="row textColor" style="margin: 10px 0;font-size: 12px;padding: 0 5px;">
              <div class="col">标签名</div>
              <div class="col" style="text-align: right;">数据量</div>
            </div>
            <div style="position: relative;">
              <el-input v-model="searchName" placeholder="标签1" @mouseenter="showBox" />
              <transition name="fade">
                <div class="setBox" v-if="boxState" @mouseenter="showBox" @mouseleave="hideBox">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  <el-icon>
                    <Delete />
                  </el-icon>
                </div>
              </transition>
            </div>
            <el-input v-model="searchName" placeholder="标签1" />
            <el-input v-model="searchName" placeholder="标签2" />
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from "vue";
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { getDatasetDataList } from 'src/api/dataset'
import { dataSetStore } from 'src/stores/dataSet';
import imgUrl from 'assets/dataSet/labelTypeIcon2.png'
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const activeIndex = ref('1')
const chooseNumber = ref('1')
const searchName = ref('')
const checked1 = ref(false)
const loading = ref(true)
const boxState = ref(false)

const dataList = shallowRef({
  results: <any>[]
})
function showBox() {
  boxState.value = true
}
function hideBox() {
  boxState.value = false
}

const handleSelect = (key: string) => {
  chooseNumber.value = key
}
function showCheck() {
  console.log(checked1.value)
}

getData()
function getData() {
  let obj = {
    label_task: dataSetStore().task_id
  }
  getDatasetDataList(projectId, dataSetStore().dataset_id, obj).then((res: any) => {
    dataList.value = res.data
  }).finally(() => {
    loading.value = false
  }).catch(error => {
    console.log(error)
  })
}

const checkAll = ref(false)
const checkedCities = ref([])
const cities =ref(<any>[])
//  全选操作
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities.value : []

}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.value.length
  cities.value=value
  console.log(value)
}
</script>

<style scoped lang="scss">
.tagsBox {
  width: 250px;

  .el-input {
    margin-bottom: 20px;
  }
}

.dataBox {
  width: 100%;
  text-align: center;
  position: relative;

  .el-image {
    width: 90%;
  }
}

.setBox {
  width: calc(100% - 2px) ;
  height: 30px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  background: linear-gradient(to right,rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.9));
  position: absolute;
  top: 1px;
  right: 1px;
  text-align: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: all .3s ease;
}

.fade-enter-from,
.fade-leave-to {
  transform: scale(.5);
  transform-origin: right bottom;
}</style>
